<template>
	<view class="recharge">
	   <view class="recharge-tyis">
	   	  <text>充值账号</text>
		  <text>{{formc.mobile}}</text>
	   </view>
	   <view class="recharge-border"> </view>
	   <view class="recharge-money">
	   	    <view class="recharge-money-title">
	   	    	<text>充值金额</text>
	   	    </view>
			<view class="recharge-money-icon">
				<text>￥</text>
				<u--input
					border="none"
					placeholder="请输入充值金额"
					type="number"
					maxlength="13"
					v-model="formc.money"
					></u--input>
			</view>
			  <view class="recharge-border"> </view>
			  <view class="recharge-money-list">
			  	  <view @click="recharges(i)" class="recharge-money-list-item" :class="index==i?'highlight':''" v-for="(l,i) in moneyList" :key="i">
			  	  	 <text>{{l+'元'}}</text>
			  	  </view>
			  </view>
			  <view class="recharge-money-btn" @click="moneyFunc">
			  	  <text>确认充值</text>
			  </view>
	   </view>
	   <view class="recharge-tips">
	   	   <view class="recharge-tips-th">
	   	   	   <text>注意事项</text>
	   	   </view>
		   <view class="recharge-tips-td">
		       <view class="recharge-tips-td-item" v-for="(l,i) in tipsList">
				<view class="recharge-tips-td-item-border"> </view>
		       	<text>{{l}}</text>
		       </view>
		   </view>
	   </view>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	export default{
		mixins:[mixin],
		data(){
			return{
				moneyList:[100,200,500,1000,2000,5000],
				tipsList:['充值额度请遵循各大银行限额规范','充值金额在1分钟内即可到账','充值卡号除地方银行的任意储蓄卡，暂不支持信用卡充值','单笔金额100—5W（100或100的倍数）'],
				index:-1,
				formc:{
					paytype:'money',
					money:'',					
					mobile:''
				},
			}
		},
		onShow() {
			let user = uni.getStorageSync('userInfo')
			this.formc.mobile=user.mobile
		},
		methods:{
			recharges(i){
				this.index = i
				this.formc.money = this.moneyList[i]
			},
		async moneyFunc(){
				if(this.money<1){
					this.$u.toast('请输入充值金额最小值1')
					return
				}
				let res = await this.$http({
					url:this.$api.MoneyRecharge,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:this.formc
				})
				if(res.code===200){
					this.topay(res.data.ordersn,this.formc.paytype)
				}else{
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.recharge{
		padding-top: 60rpx;
		&-tyis{
			width: calc(100vw - 80rpx);
			margin: auto;
			display: flex;
			justify-content: space-between;
			
			text:nth-child(1){
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8C93AA;
			}
			text:nth-child(2){
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #16172F;
			}
		}
		
		&-money{
		  &-title{
			  margin: 40rpx 0 0 40rpx;
			  font-size: 28rpx;
			  font-family: PingFangSC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #8C93AA;
		  }
		  &-icon{
			   margin: 28rpx 0 0 40rpx;
			   font-size: 44rpx;
			   display: flex;
		  }
		  &-list{
			  display: flex;
			  flex-wrap: wrap;
			  margin-top: 36rpx;
			  margin-left: 20rpx;
			&-item{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #8C93AA;
				margin-bottom: 21rpx;
				margin-left: 20rpx;
				width: calc((100vw - 80rpx - 40rpx) / 3);
				height: 100rpx;
				background: #F8F7FC;
				border-radius: 4rpx;
			}
		  }
		  &-btn{
			  width: calc(100vw - 80rpx);
			  height: 88rpx;
			  background: #468EFF;
			  border-radius: 4rpx;
			  margin: auto;
			  margin-top: 50rpx;
			  text-align: center;
			  line-height: 88rpx;
			  font-size: 32rpx;
			  font-family: PingFangSC-Semibold, PingFang SC;
			  font-weight: 600;
			  color: #FFFFFF;
		  }
		}
	    &-tips{
			&-th{
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #16172F;
				margin: 48rpx 0 0 40rpx;
			}
			&-td{
				&-item{
					display: flex;
					align-items: center;
					margin-top: 16rpx;
				    &-border{
						margin-left: 40rpx;
						width: 8rpx;
						height: 8rpx;
						background: #468EFF;
						border-radius: 4px;
					}
					text{
						margin-left: 5rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
				
			}
		}
	}
	.recharge-border{
	   width: calc(100vw - 80rpx);
	   height: 1px;
	   margin: auto;
	   background: #ECEFF1;
	   margin-top: 40rpx;
	}
	.highlight{
		background: rgba(70,142,255,0.0600);
		border-radius: 4rpx;
		border: 1px solid #468EFF;
		position: relative;
		width: calc((100vw - 80rpx - 40rpx  ) / 3 - 2px);
		height: calc(100rpx - 2px);
	}
</style>